define(function(require, exports, module) {

	require("layout");
	require("plugins/desktop/normal-style.css");
	require("loading");

	var router = require("plugins/tools/router.js");
	var config = require("plugins/config/config.js");
	var index = require("index");

	var template = '<div id="main" class="layout-container layout-row">' +
        '<div class="main-left-container layout-column" :style="sideContainerStyle">' +
            '<div :class="logoCollapsedClass"><div class="main-logo-icon">&nbsp;</div></div>' +
            '<div class="layout-main">' +
            	'<div id="menu" class="main-menu-container">' +
		            '<i-menu ' +
		            	'theme="dark" ' +
		            	'class="menu-item collapsed-menu" width="78px" ' +
		            	'@on-select="onMenuClick" :style="collapsedMenuVisible">' +
		            	'<template v-for="menu in menus">' +
		            		'<Dropdown ' +
		            			'placement="right-start" ' +
		            			'@on-click="onMenuClick" transfer ' +
		            			'v-if="menu.children && menu.children.length">' +
				                '<menu-item>' +
			                    	'<img v-if="menu.icon" :src="menu.icon" />' +
			                        '<span>{{menu.name}}</span>' +
				                '</menu-item>' +
				                '<dropdown-menu slot="list" class="mb4j-dropdown-menu">' +
				                    '<template v-for="child in menu.children">' +
				                    	'<Dropdown ' +
				                    		'v-if="child.children && child.children.length" ' +
				                    		'placement="right-start" transfer> ' +
							            	'<dropdown-item>{{child.name}}</dropdown-item>' +
							            	'<dropdown-menu slot="list">' +
							            		'<dropdown-item ' +
							            			'v-for="third in child.children" ' +
							            			':name="third.id">' +
							            			'{{third.name}}' +
							            		'</dropdown-item>' +
							            	'</dropdown-menu>' +
							        	'</Dropdown>' +
				                    	'<dropdown-item ' +
					                    	':name="child.id" ' +
					                    	'v-else>' +
					                    	'{{child.name}}' +
					                    '</dropdown-item>' +
				                    '</template>' +
				                '</dropdown-menu>' +
			                '</Dropdown>' +
			                '<Tooltip :content="menu.name" placement="right" transfer v-else>' +
				                '<menu-item :name="menu.id">' +
			                    	'<img v-if="menu.icon" :src="menu.icon" />' +
			                        '<span>{{menu.name}}</span>' +
				                '</menu-item>' +
			                '</Tooltip>' +
		                '</template>' +
		            '</i-menu>' +
		            '<i-menu ' +
		            	'ref="side_menu" ' +
		            	':active-name="activeMenuName" ' +
		            	':open-names="openMenuNames" ' +
		            	'theme="dark" class="menu-item" width="auto" ' +
		            	'@on-select="onMenuSelect" :style="unCollapsedMenuVisible">' +
	            		'<template v-for="menu in menus">' +
			                '<submenu :name="menu.id" ' +
			                	'v-if="menu.children && menu.children.length">' +
			                    '<template slot="title">' +
			                    	'<img v-if="menu.icon" :src="menu.icon" />' +
			                        '<span>{{menu.name}}</span>' +
			                    '</template>' +
			                    '<template v-for="child in menu.children">' +
					                '<submenu :name="child.id" ' +
					                	'v-if="child.children && child.children.length">' +
					                    '<template slot="title">' +
					                    	'<img v-if="child.icon" :src="child.icon" />' +
					                        '<span>{{child.name}}</span>' +
					                    '</template>' +
					                    '<menu-item ' +
					                    	'v-for="third in child.children" :name="third.id">' +
					                    	'{{third.name}}' +
					                    '</menu-item>' +
					                '</submenu>' +
					                '<menu-item :name="child.id" v-else>' +
				                    	'<img v-if="child.icon" :src="child.icon" />' +
				                        '<span>{{child.name}}</span>' +
					                '</menu-item>' +
				                '</template>' +
			                '</submenu>' +
			                '<menu-item :name="menu.id" v-else>' +
		                    	'<img v-if="menu.icon" :src="menu.icon" />' +
		                        '<span>{{menu.name}}</span>' +
			                '</menu-item>' +
		                '</template>' +
		            '</i-menu>' +
            	'</div>' +
            '</div>' +
        '</div>' +
        '<div class="layout-main layout-column">' +
        	'<div id="header">' +
        		'<Row>' +
			        '<i-col span="12">' +
			        	'<Icon :class="collapseIconClass" type="md-menu" size="24" v-on:click="setCollapsed"></Icon>' +
			        '</i-col>' +
			        '<i-col span="12">' +
			        	'<span class="pull-right">' +
			        		'<Icon class="menu-icon" type="md-swap" size="24" v-on:click="onSwitchDesktop"></Icon>' +
			        		'<Icon ' +
			        			'class="menu-icon" ' +
			        			':type="this.fullscreen ? \'md-contract\' : \'md-expand\'" ' +
			        			'size="24" v-on:click="onFullScreen"></Icon>' +
			        		'<Icon ' +
			        			'class="menu-icon" type="md-settings" ' +
			        			'size="24" v-on:click="onSetting"></Icon>' +
			        		'<Icon ' +
			        			'class="menu-icon" type="md-log-out" type="error" ' +
			        			'size="24" v-on:click="onExit"></Icon>' +
			        	'</span>' +
			        '</i-col>' +
			    '</Row>' +
        	'</div>' +
        	'<div id="tag-nav" class="layout-row">' +
        		'<div class="buttons">' +
        			'<Icon type="ios-arrow-back" v-on:click="onScrollLeft"></Icon>' +
        		'</div>' +
        		'<div class="layout-main">' +
        			'<Tag ' +
        				'type="dot" :closable="menu.closable != false" ' +
        				'v-for="(menu, index) in openedMenus" ' +
        				':color="menu.id==selectedOpenedMenu.id ? \'primary\':\'\'" ' +
        				'@on-close="onTabClose(menu, index)" ' +
        				'@click.native="onTabClicked(menu)">' +
        				'{{menu.name}}' +
        			'</Tag>' +
        		'</div>' +
        		'<div class="buttons">' +
        			'<Icon type="ios-arrow-forward" v-on:click="onScrollRight"></Icon>' +
        			'<Dropdown placement="bottom" @on-click="onCloseTabClick">' +
		                '<Icon type="ios-close-circle-outline"></Icon>' +
	                	'<dropdown-menu slot="list">' +
				            '<dropdown-item name="current">' + $.i18n.prop("home.close.current") + '</dropdown-item>' +
				            '<dropdown-item name="all">'+ $.i18n.prop("home.close.all") + '</dropdown-item>' +
				        '</dropdown-menu>' +
	            	'</Dropdown>' +
        		'</div>' +
        	'</div>' +
        	'<div class="layout-main layout-column">' +
        		'<div class="layout-main layout-column" :id="menu.id" ' +
        			'v-for="(menu, index) in openedMenus" ' +
        			':style="{display: menu.id==selectedOpenedMenu.id ? \'\':\'none\'}">' +
        		'</div>' +
        	'</div>' +
        '</div>' +
 	'</div>';
	module.exports = {

		render: function(data, fullscreen) {
			router.addRouter("index/home")
			var dom = $(template).appendTo(document.body)[0];
			this.bindVue(dom, data, fullscreen);
		}, 
		bindVue:function(dom, data, fullscreen) {
			var profile = null;
			var main = new Vue({
				el:dom,
				data:{
					fullscreen:fullscreen,
					collapsed:false,
					activeMenuName:null,
					openMenuNames:[],
					openedMenus:[],
					selectedOpenedMenu:{},
					menus: [],
					menuRelation:{}
				},
				computed: {
					collapsedMenuVisible:function() {
						return {
							display:this.collapsed ? "" : "none"
						}
					},
					unCollapsedMenuVisible:function() {
						return {
							display:this.collapsed ? "none" : ""
						}
					},
					sideContainerStyle:function() {
						return {
							width:this.collapsed ? "78px":"200px"
						};
					},
					collapseIconClass:function() {
						return ["menu-icon", this.collapsed ? "rotate-icon" : ""];
					},
					logoCollapsedClass:function() {
						return ["main-logo", this.collapsed ? "collapsed-logo" : ""];
					}
				},
				methods: {
					setCollapsed:function() {
						this.collapsed = !this.collapsed;
					},
					setMenus:function(menus) {
						var home = {
							id:"home", name: $.i18n.prop("home.title"), router: "index/home", 
							opend:true, closable:false
						};
						this.menus = menus;
						this.setMenuRelation(menus);
						this.menuRelation[home.id] = home;
						this.openTabMenu(home.id);
						if(this.menus.length > 0) {
							this.openMenuNames = [this.menus[0].id];
							//需要手动更新
							this.$nextTick(function() {
			                    this.$refs.side_menu.updateOpened();
			                });
						}
					},
					openTabMenu:function(name) {
						var menu = this.menuRelation[name];
						if(menu) {
							if(this.openedMenus.indexOf(menu) < 0) {
								this.openedMenus.push(menu);
								//创建
								this.$nextTick(function() {
									menu.tabContent = this.createTabContent(menu);
								});
							}
							this.selectedOpenedMenu.opened = false;
							menu.opened = true;
							this.selectedOpenedMenu = menu;
							this.$nextTick(function() {
								//滚动位置
								this.setScrollPosition();
							});
						}
					},
					createTabContent:function(menu) {
						var _this = this;
						var content = $('<div class="layout-main"></div>').appendTo($("#" + menu.id));
						var result = {
							router:null,
							show:function() {
								_this.onTabClicked(menu);
							},
							close:function() {
								var index = _this.openedMenus.indexOf(menu);
								if(index > 0) {
									_this.onTabClose(menu, index);
								}
							},
							destroy:function() {
								if(this.router) {
									this.router.destroy();
									this.router = null;
								}
							}

						};
						result.router = router.route(content, {
				        	router:menu.router,
				        	beforeInit:function(vue) {
				        		vue.loading = function(op) {
				        			var me = this;
				        			if(op == "close") {
				        				$(this.$el).loading("close");
				        				return;
				        			}
				        			$(this.$el).loading();
				        			return {
				        				close:function() {
				        					$(me.$el).loading("close");
				        				}
				        			};
				        		}
				        		
				        		vue.getWindow = function() {
				        			return result;
				        		}

				        		vue.showWindow = function() {
				        			result.show();
				        		}

				        		vue.closeWindow = function() {
				        			result.close();
				        		}
				        		vue.loading();
				        	},
				        	success: function(vue, isInitComplete) {
				        		var title = $(vue.$el).find("title");
				        		title.remove();
						        if(isInitComplete) {
						        	vue.loading("close");
						        }
				        	},
				        	error: function() {
				        		result.close();
				        	}
				        }, {});
				        return result;
					},
					setScrollPosition:function() {
						var index = this.openedMenus.indexOf(this.selectedOpenedMenu);
						var container = $("#tag-nav div.layout-main");
						var tag = container.find("div.ivu-tag:eq("+index+")");
						var width = container.width();
						var tagWidth = tag.outerWidth();
						var left = tag.position().left;
						var x = container.scrollLeft();
						if(left + tagWidth > width) {
							x += left + tagWidth - width;
						}
						if(left < 0) {
							x += left - 3;
						}
						container.animate({
							scrollLeft:x
						});
					},
					onTabClicked:function(menu) {
						this.onMenuClick(menu.id);
					},
					onTabClose:function(menu, index) {
						if(menu.tabContent) {
							menu.tabContent.destroy();
							menu.tabContent = null;
						}
						this.openedMenus.splice(index, 1);
						if(menu.opened) {
							var prevMenu = this.openedMenus[index - 1];
							this.onTabClicked(prevMenu);
						}
					},
					onScrollLeft:function() {
						var container = $("#tag-nav div.layout-main");
						var left = container.scrollLeft() - 10;
						container.animate({
							scrollLeft:left < 0 ? 0 : left
						});
					},
					onScrollRight:function() {
						var container = $("#tag-nav div.layout-main");
						var left = container.scrollLeft() + 10;
						container.animate({
							scrollLeft:left
						});
					},
					onCloseTabClick:function(name) {
						if(name == "all") {
							var menu = null;
							for(var i=1; i<this.openedMenus.length; i++) {
								menu = this.openedMenus[i];
								if(menu.tabContent) {
									menu.tabContent.destroy();
									menu.tabContent = null;
								}
							}
							this.openedMenus.splice(1, this.openedMenus.length - 1);
							this.onTabClicked(this.openedMenus[0]);
						} else {
							var menu = this.selectedOpenedMenu;
							//没有closeable，默认为true
							if(menu.closable != false) { 
								var index = this.openedMenus.indexOf(menu);
								this.onTabClose(menu, index);
							}
						}
					},
					setMenuRelation:function(menus, parent) {
						var menu = null;
						for(var i=0; i<menus.length; i++) {
							menu = menus[i];
							menu.parent = parent;
							if(menu.children && menu.children.length) {
								this.setMenuRelation(menu.children, menu.id);
							}
							this.menuRelation[menu.id] = menu;
						}
					},
					openMenus:function(name) {
						var menu = this.menuRelation[name];
						if(menu) {
							var openNames = [];
							while(menu.parent) {
								openNames.push(menu.parent);
								menu = this.menuRelation[menu.parent];
							}
							this.openMenuNames = openNames;
							//需要手动更新
							this.$nextTick(function() {
			                    this.$refs.side_menu.updateOpened();
			                });
		                }
					},
					onMenuSelect:function(name) {
						this.openTabMenu(name);
					},
					onMenuClick:function(name) {
						if(name) {
							//选中的
							this.activeMenuName = name;
							this.$nextTick(function() {
								this.$refs.side_menu.updateActiveName();
							});
							//展开的
							this.openMenus(name);
							this.onMenuSelect(name);
						}
					},
					onSwitchDesktop:function() {
						//关闭所有窗口
						$.closeAllWindow();
						//切换为window类型
						this.$destroy();
						$(dom).remove();
						$(this.$el).remove();
						data.desktop = "window";
						index.render(data, function() {}, this.fullscreen);
					},
					onFullScreen:function() {
						if(this.fullscreen) {
							document.exitFullscreen?document.exitFullscreen():
							document.mozCancelFullScreen?document.mozCancelFullScreen():
							document.webkitExitFullscreen?document.webkitExitFullscreen():'';
						} else {
							var element = document.body;
	               			var requestMethod =element.requestFullScreen
					             ||element.webkitRequestFullScreen //谷歌
					             ||element.mozRequestFullScreen  //火狐
					             ||element.msRequestFullScreen; //IE11
					        if (requestMethod) {     
					            requestMethod.call(element);   
					        } else if (typeof window.ActiveXObject !== "undefined") {  
					            var wscript = new ActiveXObject("WScript.Shell"); 
					            if (wscript !== null) {    //创建成功
					                 wscript.SendKeys("{F11}");//触发f11   
					            }   
					        }
					    }
					    this.fullscreen = !this.fullscreen;
					},
					onSetting:function() {
						if(profile == null) {
							profile = $.window({
								title:$.i18n.prop("info.profile"),
								router:"index/profile",
								maxmin:false,
								max:false,
								resize:false,
								area:['500px', '400px'],
								end:function() {
									profile = null;
								}
							});
						} else {
							profile.show();
						}
					},
					onExit:function() {
						$.confirm($.i18n.prop("info.confirm.exit"), function (isOk){
							if(isOk) {
								$.get(config.getLogoutLocation(), {}, function() {
									window.location.href = config.getLoginLocation();
								});
							}
						}, true);
					}
				}
			});
			main.$nextTick(function() {
				this.setMenus(data.menus);
			});
		}
	}
});